<!--
 * @Description: 分公司-成本计划
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 11:08:02
 * @LastEditTime: 2024-03-01 15:42:04
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\headquartersDashboard\index.vue
-->
<template>
  <base-breadcrumb>
    <a-spin :spinning="spinning">
      <!-- 暂时不加放大缩小 -->
      <fullScreen /> 
      <!-- 当期数据统计表 -->
      <a-card :bordered="false">
        <!-- 统计 -->
        <board isPresent="1" :totalArr="totalArr"></board>
        <div class="btn_box page-btn-right-top" v-show="code === 'CO'">
          <a-button @click="superior">上一级</a-button>
        </div>
        <!-- 表格 -->
        <!-- <Table :columns="columns" :tableData="tableData"></Table> :isScrollY="isScrollY" :isScrollX="false"-->
        <a-row>
          <div class="unit">(单位：万元)</div>
        </a-row>
        <a-row class="totalBox totalBox1">
          <list-table :columns="columns" :ArrTableData="tableData" :isShowColumnFilter="false" :showPage="false" :customRow="cellEdit"></list-table>
        </a-row>
        <!-- 柱状图 -->
        <EBar ref="accomplishRatio" :eBarData="accomplishRatioOption" :ready="ready" id="eBar1" :isDataZoom="true" :zoom="true" />
        <div class="add">目标与实际成本差值</div>
        <div class="smb">实目比</div>
      </a-card>

      <!-- 已完成节点数据统计表 -->
      <a-card :bordered="false">
        <!-- 统计 -->
        <board :totalArr="project"></board>

        <!-- 表格 -->
        <!-- <Table :columns="columns" :tableData="projectData"></Table> :isScrollY="isScrollY1" :isScrollX="false"-->
        <a-row>
          <div class="unit">(单位：万元)</div>
        </a-row>
        <a-row class="totalBox totalBox1">
          <list-table :columns="columns" :ArrTableData="projectData" :isShowColumnFilter="false" :showPage="false"> </list-table>
        </a-row>
        <!-- 柱状图 -->
        <EBar ref="accomplishRatio" :eBarData="accomplishRatioOption1" :ready="ready1" id="eBar2" :isDataZoom="true" :zoom="true" />
        <div class="add">目标与实际成本差值</div>
        <div class="smb">实目比</div>
      </a-card>

      <a-card :bordered="false">
        <title-name title="总成本折线对比图" />
        <div class="project1" v-if="isPresent">
          <div :class="[isBackColor?'projectColor':'','allProject']" @click="getCostContrastList(2)">全部项目</div>
          <div :class="[!isBackColor?'projectColor':'','allProject']" @click="getCostContrastList(1)">在建项目</div>
        </div>
        <!-- 表格 -->
        <!-- <Table :columns="columns1" :tableData="dataSource"></Table> -->
        <a-row>
          <div class="unit">(单位：万元)</div>
        </a-row>
        <a-row class="totalBox">
          <list-table :columns="columns1" :scroll="{x: true}"  :ArrTableData="dataSource" :isShowColumnFilter="false" :showPage="false"></list-table>
        </a-row>
        <ELine :eLineData="ELineData" :lineShow="lineShow"></ELine>
      </a-card>
    </a-spin>
  </base-breadcrumb>
</template>
<script>
import board from '../../headquartersDashboard/components/board/index.vue'
import EBar from '../../headquartersDashboard/components/EBar/EBar.vue' // 柱状图
// import Table from '../../headquartersDashboard/components/Table/Table.vue';
import ELine from '../../headquartersDashboard/components/ELine/ELine.vue'
import { placeholder } from '../../headquartersDashboard/components/placeholderWay.js'
import fullScreen from '../../headquartersDashboard/components/fullScreen/fullScreen.vue' // 缩放功能
import { getFgsCurrentPeriodStatistics, getFgsCompleteNodeStatistics, getFgsCostContrast } from '@/api/businessAffairs/businessCostPlanManagement.js'

export default {
  name: 'spectaculars',

  components: {
    board,
    EBar,
    // Table,
    ELine,
    fullScreen
  },
  data() {
    return {
      isBackColor:true,
      spinning: false,
      isPresent:true,
      // isScrollY: 0,
      // isScrollY1: 0,
      // 当期数据统计表 - 表头
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'right',
          customRender: (text, record, index) => {
            if (record.flag == 2) {
              if (record.solidEyeRatio * 1 != 0) {
                return (
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div class="iconClass">
                      <a-icon type="exclamation-circle" theme="filled" style="color : #f4ea2a;fontSize:16px" class="icon" /> {index + 1}{' '}
                    </div>
                  </a-tooltip>
                )
              } else {
                return <div>{index + 1}</div>
              }
            } else if (record.flag == 1) {
              return (
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{record.flagTips}</span>
                  </template>
                  <div class="iconClass">
                    <a-icon type="exclamation-circle" theme="filled" style="color : #de5956;fontSize:16px" class="icon" /> {index + 1}{' '}
                  </div>
                </a-tooltip>
              )
            } else {
              return index + 1
            }
          }
        },
        {
          title: '项目名称',
          width: 180,
          dataIndex: 'name'
        },

        {
          title: ' 标准成本',
          dataIndex: 'standardCost',
          align: 'center',
          width: 110
        },

        {
          title: ' 目标成本',
          dataIndex: 'targetCost',
          align: 'center',
          width: 150
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="backgroundColor : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="backgroundColor : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        // {
        //   title: ' 当期累计目标成本',
        //   dataIndex: 'currentTargetCost',
        //   align: 'center',
        // },
        {
          title: ' 当期累计目标成本',
          dataIndex: 'currentTargetCost',
          align: 'center',
          width: 150
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="backgroundColor : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="backgroundColor : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        {
          title: ' 当期累计实际成本',
          dataIndex: 'realityCost',
          align: 'center',
          width: 150
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="backgroundColor : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="backgroundColor : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        {
          title: ' 目标与实际成本差值',
          dataIndex: 'difference',
          align: 'center',
          width: 160
          // customRender: (text, record, index) => {
          //   if (record.flag === 2) {
          //     return <div style="backgroundColor : #f4ea2a"> {text}</div>
          //   } else if (record.flag === 1) {
          //     return <div style="backgroundColor : #de5956"> {text}</div>
          //   } else {
          //     return text
          //   }

          // }
        },
        {
          title: ' 实目比',
          dataIndex: 'solidEyeRatio',
          align: 'center',
          width: 160,
          customRender: (text, record, index) => {
            if (record.flag == 2) {
              if (text * 1 != 0) {
                return <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div style="backgroundColor : #f4ea2a"> {text}</div>
                  </a-tooltip>
                
              } else {
                return <div> {(text * 1).toFixed(4)}</div>
              }
            } else if (record.flag == 1) {
              return <a-tooltip placement="top">
                    <template slot="title">
                      <span>{record.flagTips}</span>
                    </template>
                    <div style="backgroundColor : #de5956"> {text}</div>
                  </a-tooltip>
              
            } else {
              return text
            }
          }
        }
      ],

      // 当期数据统计表 - 统计
      tableData: [],

      // 当期数据统计表 - 统计
      totalArr: [
        {
          name: '目标成本合计',
          money: ''
        },
        {
          name: '实际成本合计',
          money: ''
        },
        {
          name: '目标与实际成本差值',
          money: ''
        },
        {
          name: '实目比',
          money: ''
        }
      ],
      // 已完成节点 - 统计
      project: [
        {
          name: '目标成本合计',
          money: ''
        },
        {
          name: '实际成本合计',
          money: ''
        },
        {
          name: '目标与实际成本差值',
          money: ''
        },
        {
          name: '实目比',
          money: ''
        }
      ],
      // 已完成节点 - 表格数据
      projectData: [],
      // 当期数据统计表 - 柱状图
      accomplishRatioOption: {
        isBarWidth: true,
        legend: {
          // left: '8%',
          // top: '6%',
          data: ['标准成本', '当前累计目标成本', '当前累计实际成本']
        },
        color: ['#4874cb', '#ee823a', '#f2bb43'],
        // dataZoom: {
        //   show: true,
        //   realtime: true,
        //   // type:'slider',
        //   y: 220,
        //   height: 20,
        //   start: 0,
        //   end: 80
        // },
        // y轴滚动条配置
        dataZoom: {
          show: true,
          realtime: true,
          type: 'slider',
          // y:70,
          width: '80%',
          height: 10,
          start: 0,
          end: 80,
          left: 100,
          right: 8,
          bottom: 30,
          zoomLock: true
          // containLabel: true
        },
        name: '（万元）', //单位
        xAxis: {
          type: 'category',
          triggerEvent: true,
          data: [],
          axisLabel: {
            show: true,
            interval: 0,
            margin: 6,
            textStyle: {
              color: function(value) {
                if (value === '广东事业部') {
                  return '#f4ea2a'
                } else if (value === '基础分公司') {
                  return '#de5956'
                } else if (value === '水利水电分公司') {
                  return '#de5956'
                } else {
                  return '#666666'
                }
              }
            }
          }
        },
        // nameList:
        data: [
          {
            name: '标准成本',
            data: [],
            type: 'bar',
            barWidth: '5%'
          },
          {
            name: '当前累计目标成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '5%'
          },
          {
            name: '当前累计实际成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '5%'
          }
        ]
      },
      accomplishRatioOption1: {
        isBarWidth: true,
        legend: {
          // left: '8%',
          // top: '6%',
          data: ['标准成本', '当前累计目标成本', '当前累计实际成本']
        },
        color: ['#4874cb', '#ee823a', '#f2bb43'],
        // dataZoom: {
        //   show: true,
        //   realtime: true,
        //   // type:'slider',
        //   y: 220,
        //   height: 20,
        //   start: 0,
        //   end: 80
        // },
        // y轴滚动条配置
        dataZoom: {
          show: true,
          realtime: true,
          type: 'slider',
          // y:70,
          width: '80%',
          height: 10,
          start: 0,
          end: 80,
          left: 100,
          right: 8,
          bottom: 30,
          zoomLock: true
          // containLabel: true
        },
        name: '（万元）', //单位
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            show: true,
            interval: 0,
            margin: 6,
            textStyle: {
              color: function(value) {
                if (value === '广东事业部') {
                  return '#f4ea2a'
                } else if (value === '基础分公司') {
                  return '#de5956'
                } else if (value === '水利水电分公司') {
                  return '#de5956'
                } else {
                  return '#666666'
                }
              }
            }
          }
        },
        // nameList:
        data: [
          {
            name: '标准成本',
            data: [],
            type: 'bar',
            barWidth: '10%'
          },
          {
            name: '当前累计目标成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '10%'
          },
          {
            name: '当前累计实际成本',
            data: [],
            type: 'bar',
            barWidth: 20,
            barWidth: '10%'
          }
        ]
      },
      ready: false,
      ready1: false,
      // 当期数据统计表 - 差值
      differenceValueData: [],
      solidEyeRatio: [],
      differenceValueData1: [],
      solidEyeRatio1: [],
      // 总成本折现对比图 - 表头
      columns1: [
        {
          title: '成本名称',
          dataIndex: 'name',
          width: 180
        }
      ],
      // 总成本折现对比图 - 表数据
      dataSource: [],

      // 总成本折现对比图 - 折线图数据
      ELineData: {
        name: '（万元）',
        color: ['#4874cb', '#ee823a', '#f2bb43'],
        xAxis: {
          data: []
        },
        legend: {
          left: '8%',
          top: '6%',
          data: ['标准成本', '当期累计目标成本', '当期累计实际成本']
        },
        series: [
          {
            name: '标准成本',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            label: {
              show: true,
              position: 'top',
              color: '#4874cb'
            },
            data: []
          },
          {
            name: '当期累计目标成本',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            label: {
              show: true,
              position: 'top',
              color: '#ee823a'
            },
            data: []
          },
          {
            name: '当期累计实际成本',
            type: 'line',
            smooth: true,
            // stack: 'Total',
            label: {
              show: true,
              position: 'top',
              color: '#f2bb43'
            },
            data: []
          }
        ]
      },
      lineShow: false,
      id: this.$userInfo()?.currentPost?.id,
      code: this.$userInfo()?.currentPost?.code,
      timer1: null,
      timer2: null,
      timer3: null
    }
  },
  watch: {
    //监听路由变更
    $route(newVal) {
      //   console.log(newVal,'newVal');
      if (newVal.path == '/businessAffairs/businessCostPlanManagement/branchDashboard/spectaculars') {
        if (this.$route.query.id) {
          this.id = this.$route.query.id
        }
        this.isBackColor =  true
        this.spinning = true
        this.getData()
        this.getProject()
        this.getCostContrastList(this.isBackColor?2:1)
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
    }
    this.spinning = true
    this.getData()
    this.getProject()
    this.getCostContrastList(this.isBackColor?2:1)
  },
  mounted() {
    // this.$refs.accomplishRatio.resize()
  },
  methods: {
    //表格点击下钻
    cellEdit(value) {
      let that = this
      return {
        on: {
          click: () => {
            that.$router.push({
              path: '/businessAffairs/businessCostPlanManagement/projectDashboard/spectaculars',
              query: {
                id: value.id
              }
            })
          }
        }
      }
    },
     //图表点击下钻
    lineClick(params){
      this.$router.push({
        path: '/businessAffairs/businessCostPlanManagement/projectDashboard/spectaculars',
        query:{
          id:params?.data?.id || params.id
        }
      })
    },
    async getData() {
      this.ready = false
      clearTimeout(this.timer1)
      this.timer1 = setTimeout(() => {
        getFgsCurrentPeriodStatistics({ id: this.id })
          .then(res => {
            if (res.code == 0) {
              let { data } = res
              // 头部数据
              this.totalArr = placeholder(this.totalArr.map((item, index) => {
                if (item.name && item.name === '目标成本合计') {
                  item.money = data.targetCostTotal
                } else if (item.name && item.name === '实际成本合计') {
                  item.money = data.realityCostTotal
                } else if (item.name && item.name === '实目比') {
                  item.money = data.solidEyeRatio
                } else if (item.name && item.name === '目标与实际成本差值') {
                  item.money = data.difference
                }
                return item
              }))
              // 表格数据
              this.tableData = placeholder(data.list)
              // this.isScrollY = data.list.length > 10 ? 350 : false
              let nameArr = [] // 柱状图名称
              let standardCostArr = [] //总标准成本集合
              let targetCostArr = [] //当期累计目标成本集合
              let realityCostArr = [] // 当期累计实际成本集合
              let differenceArr = []
              let solidEyeRatioArr = []
              data.list.forEach((item, index) => {
                item.name !== '合计' && nameArr.push(item.name)
                item.name !== '合计' && standardCostArr.push({value:item.standardCost,id:item.id})
                item.name !== '合计' && targetCostArr.push({value:item.currentTargetCost,id:item.id})
                item.name !== '合计' && realityCostArr.push({value:item.realityCost,id:item.id})
                item.name !== '合计' && this.differenceValueData.push(item.difference)
                item.name !== '合计' && this.solidEyeRatio.push(item.solidEyeRatio)
                item.name !== '合计' &&
                  differenceArr.push({
                    name: item.name,
                    difference: item.difference
                  })
                item.name !== '合计' &&
                  solidEyeRatioArr.push({
                    name: item.name,
                    solidEyeRatio: item.solidEyeRatio
                  })
              })
              this.accomplishRatioOption.xAxis.data = nameArr
              this.accomplishRatioOption.xAxis.axisLabel.formatter = function(params, index) {
                let findDifferenceObj = differenceArr.find(item => item.name == params)
                let findSolidEyeRatioObj = solidEyeRatioArr.find(item => item.name == params)
                params = standardCostArr.length>7 &&params.length>6 ? params.substring(0, 6) + '...' :params
                return params + '\n' + findDifferenceObj?.difference + '\n' + findSolidEyeRatioObj?.solidEyeRatio
              }
              this.accomplishRatioOption.xAxis.axisLabel.textStyle = {
                color: params => {
                  let color = '#333'
                  data.list.forEach((item, index) => {
                    if (item.name === params) {
                      if (item.flag === 1) {
                        color = '#de5956'
                      } else if (item.flag === 2) {
                        if (item.solidEyeRatio * 1 !== 0) {
                          color = '#f4ea2a'
                        }
                      } else {
                        color = '#666666'
                      }
                    }
                  })
                  return color
                }
              }
              if (standardCostArr.length == 0 && targetCostArr.length == 0 && realityCostArr.length == 0) {
                this.accomplishRatioOption.isBar = 1
              } else {
                this.accomplishRatioOption.isBar = 2
              }
              this.accomplishRatioOption.data[0].data = standardCostArr
              this.accomplishRatioOption.data[1].data = targetCostArr
              this.accomplishRatioOption.data[2].data = realityCostArr
              this.accomplishRatioOption.onClick = (param)=>{
                 let findObj = this.tableData.find((item)=>item.name===param.value) || {},
                  newParam = {}
                  //点击x轴
                  if(param.componentType == 'xAxis'){
                    newParam = findObj || {};
                  }else{
                    newParam = param
                  }
                    this.lineClick(newParam)
                  }
                 
              this.ready = true
              this.spinning = false
            } else {
              this.spinning = false
            }
          })
          .catch(() => {
            this.spinning = false
          })
      }, 500)
    },
    async getProject() {
      this.ready1 = false
      clearTimeout(this.timer2)
      this.timer2 = setTimeout(() => {
        getFgsCompleteNodeStatistics({ id: this.id }).then(res => {
          if (res.code == 0) {
            let { data } = res
            // 头部数据
            this.project = placeholder(this.project.map((item, index) => {
              if (item.name && item.name === '目标成本合计') {
                item.money = data.targetCostTotal
              } else if (item.name && item.name === '实际成本合计') {
                item.money = data.realityCostTotal
              } else if (item.name && item.name === '实目比') {
                item.money = data.solidEyeRatio
              } else if (item.name && item.name === '目标与实际成本差值') {
                item.money = data.difference
              }
              return item
            }))
            // 表格数据
            this.projectData = placeholder(data.list)
            // this.isScrollY1 = data.list.length > 10 ? 350 : false
            let nameArr = [] // 柱状图名称
            let standardCostArr = [] //总标准成本集合
            let targetCostArr = [] //当期累计目标成本集合
            let realityCostArr = [] // 当期累计实际成本集合
            let differenceArr = []
            let solidEyeRatioArr = []
            data.list.forEach((item, index) => {
              item.name !== '合计' && nameArr.push(item.name)
              item.name !== '合计' && standardCostArr.push(item.standardCost)
              item.name !== '合计' && targetCostArr.push(item.currentTargetCost)
              item.name !== '合计' && realityCostArr.push(item.realityCost)
              item.name !== '合计' && this.differenceValueData1.push(item.difference)
              item.name !== '合计' && this.solidEyeRatio1.push(item.solidEyeRatio)
              item.name !== '合计' &&
                differenceArr.push({
                  name: item.name,
                  difference: item.difference
                })
              item.name !== '合计' &&
                solidEyeRatioArr.push({
                  name: item.name,
                  solidEyeRatio: item.solidEyeRatio
                })
            })
            this.accomplishRatioOption1.xAxis.data = nameArr
            this.accomplishRatioOption1.xAxis.axisLabel.formatter = function(params, index) {
              let findDifferenceObj = differenceArr.find(item => item.name == params)
              let findSolidEyeRatioObj = solidEyeRatioArr.find(item => item.name == params)
              return params + '\n' + findDifferenceObj?.difference + '\n' + findSolidEyeRatioObj?.solidEyeRatio
            }
            if (standardCostArr.length == 0 && targetCostArr.length == 0 && realityCostArr.length == 0) {
              this.accomplishRatioOption1.isBar = 1
            } else {
              this.accomplishRatioOption1.isBar = 2
            }
            this.accomplishRatioOption1.data[0].data = standardCostArr
            this.accomplishRatioOption1.data[1].data = targetCostArr
            this.accomplishRatioOption1.data[2].data = realityCostArr
            this.accomplishRatioOption1.xAxis.axisLabel.textStyle = {
              color: params => {
                let color = '#333'
                data.list.forEach((item, index) => {
                  if (item.name === params) {
                    if (item.flag === 1) {
                      color = '#de5956'
                    } else if (item.flag === 2) {
                      if (item.solidEyeRatio * 1 !== 0) {
                        color = '#f4ea2a'
                      }
                    } else {
                      color = '#666666'
                    }
                  }
                })
                return color
              }
            }
            this.ready1 = true
          }
        })
      })
    },

    async getCostContrastList(type = 2) {
      this.isBackColor = type == 1 ? false : true 
      this.lineShow = false
      this.dataSource = []
      this.columns1 = [
        {
          title: '成本名称',
          dataIndex: 'name',
          width: 180
        }
      ]
      clearTimeout(this.timer3)
      this.timer3 = setTimeout(() => {
        getFgsCostContrast({ id: this.id, type }).then(res => {
          if (res.code == 0) {
            let { data } = res
            data.costNameList.forEach((item, index) => {
              this.columns1.push({
                title: item.slice(0, 4) + '年' + item.slice(4, 6) + '月',
                dataIndex: item
              })
            })
            this.ELineData.xAxis.data = data.costNameList.map((item, index) => {
              return item.slice(0, 4) + '年' + item.slice(4, 6) + '月'
            })
            data.list.forEach(item => {
              if (item.name != '实目比') {
                this.dataSource.push(placeholder(item))
              }
            })
            this.ELineData.series[0].data = data.standardCostList
            this.ELineData.series[1].data = data.targetCostList
            this.ELineData.series[2].data = data.realityCostList
            this.ELineData.series[2].label = {
              show: true,
              position: 'bottom',
              color: '#f2bb43',
              formatter: function(params) {
                return params.value + '(' + data.solidEyeRatioList[params.dataIndex] + '%)'
              }
            }
            this.lineShow = true
          }
        })
      })
    },
    superior() {
      this.$router.push({
        path: '/businessAffairs/businessCostPlanManagement/headquartersDashboard/spectaculars'
      })
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.leftTitle {
  flex: 1;
}

.difference {
  flex: 7;
  display: flex;
  justify-content: space-between;
}

.superior {
  position: absolute;
  right: 50px;
  top: 10px;
}

.totalBox {
  padding: 0 20px;
  margin-top: 10px;
  margin-bottom:40px;
  @{deep} .ant-table {
    td {
      height: 35px !important;
    }
    .ant-table-body {
      // overflow-x: hidden !important;
      max-height: 385px;
      overflow-y: auto;
      margin:0  !important;
    }
  }
}
.totalBox1{
  @{deep} .ant-table {
    .ant-table-body {
      overflow-x: hidden !important;
    }
  }
}
.unit {
  text-align: right;
  margin-top: -10px;
}
.project1{
  position: absolute;
    top: 10px;
    right: 1%;
    display: flex;
    justify-content: space-evenly;
    width: 140px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #02a7f0;
    border-radius: 8px;
    .allProject{
      cursor: pointer;
      flex: 1;
      text-align: center;
    }
    .projectColor{
      background-color: #02a7f0;
      color: #fff;
    }
}

.add {
  margin-top: -80px;
  font-size: 12px;
}

.smb {
  margin-top: -4px;
  font-size: 16px;
  margin-bottom: 20px;
}
.iconClass {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.icon {
  margin-right: 5px;
}
</style>
